﻿body,
html,
ul,
li,
a,
img,
div {
  padding: 0;
  margin: 0;
}
body {
  font-size: 18px;
  font-family: "trebuchet ms", helvetica, sans-serif;
  letter-spacing: -1px;
}
body a {
  text-decoration: none;
  color: black;
}
body div.wrapper {
  position: relative;
  border: 1px dotted red;
  width: 1300px;
  height: 950px;
}
body div.wrapper ul.radial {
  /*book container*/

  z-index: 100;
  list-style-type: none;
  position: absolute;
  height: 202px;
  width: 142px;
  top: 50%;
  left: 50%;
  margin-top: -100px;
  margin-left: -70px;
}
body div.wrapper ul.radial > li > a {
  /*book anchor*/

  border: 1px solid black;
  display: block;
  width: 140px;
  height: 200px;
  background: #ddd;
  border-radius: 5px;
  overflow: hidden;
  text-align: center;
  -webkit-box-shadow: 15px 15px 15px rgba(0, 0, 0, 0.2);
  box-shadow: 15px 15px 15px rgba(0, 0, 0, 0.2);
}
body div.wrapper ul.radial ul {
  /*chapters list*/

  z-index: -1;
  list-style-type: none;
}
body div.wrapper ul.radial ul li {
  /*chapters items*/

  position: absolute;
  width: 240px;
  height: 240px;
  left: -50px;
  top: -18px;
}
body div.wrapper ul.radial ul li a {
  /*chapters anchor*/

  position: absolute;
  display: block;
  width: 110px;
  height: 50px;
  padding-top: 27px;
  border-radius: 50px;
  color: #000;
  background: #ddd;
  text-align: center;
  background-image: -webkit-radial-gradient(circle cover, #ffffff, rgba(255, 255, 255, 0) 100%);
  background-image: -moz-radial-gradient(circle cover, #ffffff, rgba(255, 255, 255, 0) 100%);
  background-image: -ms-radial-gradient(circle cover, #ffffff, rgba(255, 255, 255, 0) 100%);
  background-image: -o-radial-gradient(circle cover, #ffffff, rgba(255, 255, 255, 0) 100%);
  background-image: radial-gradient(circle cover, #ffffff, rgba(255, 255, 255, 0) 100%);
  opacity: 0.9;
  -webkit-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2);
  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2);
}
body div.wrapper ul.radial ul li:nth-child(1) {
  border: 3px solid #aedf89;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
}
body div.wrapper ul.radial ul li:nth-child(1) a {
  top: -140px;
  left: -140px;
  color: #738694;
  font-style: italic;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
}
body div.wrapper ul.radial ul li:nth-child(2) {
  border: 3px solid #aedf89;
  -webkit-transform: rotate(15deg);
  -moz-transform: rotate(15deg);
  -ms-transform: rotate(15deg);
  -o-transform: rotate(15deg);
  transform: rotate(15deg);
}
body div.wrapper ul.radial ul li:nth-child(2) a {
  top: -220px;
  left: -220px;
  -webkit-transform: rotate(-15deg);
  -moz-transform: rotate(-15deg);
  -ms-transform: rotate(-15deg);
  -o-transform: rotate(-15deg);
  transform: rotate(-15deg);
}
body div.wrapper ul.radial ul li:nth-child(3) {
  border: 3px solid #aedf89;
  -webkit-transform: rotate(30deg);
  -moz-transform: rotate(30deg);
  -ms-transform: rotate(30deg);
  -o-transform: rotate(30deg);
  transform: rotate(30deg);
}
body div.wrapper ul.radial ul li:nth-child(3) a {
  top: -220px;
  left: -220px;
  -webkit-transform: rotate(-30deg);
  -moz-transform: rotate(-30deg);
  -ms-transform: rotate(-30deg);
  -o-transform: rotate(-30deg);
  transform: rotate(-30deg);
}
body div.wrapper ul.radial ul li:nth-child(4) {
  border: 3px solid #aedf89;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}
body div.wrapper ul.radial ul li:nth-child(4) a {
  top: -220px;
  left: -220px;
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
body div.wrapper ul.radial ul li:nth-child(5) {
  border: 3px solid #aedf89;
  -webkit-transform: rotate(60deg);
  -moz-transform: rotate(60deg);
  -ms-transform: rotate(60deg);
  -o-transform: rotate(60deg);
  transform: rotate(60deg);
}
body div.wrapper ul.radial ul li:nth-child(5) a {
  top: -220px;
  left: -220px;
  -webkit-transform: rotate(-60deg);
  -moz-transform: rotate(-60deg);
  -ms-transform: rotate(-60deg);
  -o-transform: rotate(-60deg);
  transform: rotate(-60deg);
}
body div.wrapper ul.radial ul li:nth-child(6) {
  border: 3px solid #aedf89;
  -webkit-transform: rotate(75deg);
  -moz-transform: rotate(75deg);
  -ms-transform: rotate(75deg);
  -o-transform: rotate(75deg);
  transform: rotate(75deg);
}
body div.wrapper ul.radial ul li:nth-child(6) a {
  top: -220px;
  left: -220px;
  -webkit-transform: rotate(-75deg);
  -moz-transform: rotate(-75deg);
  -ms-transform: rotate(-75deg);
  -o-transform: rotate(-75deg);
  transform: rotate(-75deg);
}
body div.wrapper ul.radial ul li:nth-child(7) {
  border: 3px solid #aedf89;
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  transform: rotate(90deg);
}
body div.wrapper ul.radial ul li:nth-child(7) a {
  top: -220px;
  left: -220px;
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  transform: rotate(-90deg);
}
body div.wrapper ul.radial ul li:nth-child(8) {
  border: 3px solid #aedf89;
  -webkit-transform: rotate(105deg);
  -moz-transform: rotate(105deg);
  -ms-transform: rotate(105deg);
  -o-transform: rotate(105deg);
  transform: rotate(105deg);
}
body div.wrapper ul.radial ul li:nth-child(8) a {
  top: -220px;
  left: -220px;
  -webkit-transform: rotate(-105deg);
  -moz-transform: rotate(-105deg);
  -ms-transform: rotate(-105deg);
  -o-transform: rotate(-105deg);
  transform: rotate(-105deg);
}
body div.wrapper ul.radial ul li:nth-child(9) {
  border: 3px solid #aedf89;
  -webkit-transform: rotate(120deg);
  -moz-transform: rotate(120deg);
  -ms-transform: rotate(120deg);
  -o-transform: rotate(120deg);
  transform: rotate(120deg);
}
body div.wrapper ul.radial ul li:nth-child(9) a {
  top: -220px;
  left: -220px;
  -webkit-transform: rotate(-120deg);
  -moz-transform: rotate(-120deg);
  -ms-transform: rotate(-120deg);
  -o-transform: rotate(-120deg);
  transform: rotate(-120deg);
}
body div.wrapper ul.radial ul li:nth-child(10) {
  border: 3px solid #aedf89;
  -webkit-transform: rotate(135deg);
  -moz-transform: rotate(135deg);
  -ms-transform: rotate(135deg);
  -o-transform: rotate(135deg);
  transform: rotate(135deg);
}
body div.wrapper ul.radial ul li:nth-child(10) a {
  top: -220px;
  left: -220px;
  -webkit-transform: rotate(-135deg);
  -moz-transform: rotate(-135deg);
  -ms-transform: rotate(-135deg);
  -o-transform: rotate(-135deg);
  transform: rotate(-135deg);
}
body div.wrapper ul.radial ul li:nth-child(11) {
  border: 3px solid #aedf89;
  -webkit-transform: rotate(150deg);
  -moz-transform: rotate(150deg);
  -ms-transform: rotate(150deg);
  -o-transform: rotate(150deg);
  transform: rotate(150deg);
}
body div.wrapper ul.radial ul li:nth-child(11) a {
  top: -220px;
  left: -220px;
  -webkit-transform: rotate(-150deg);
  -moz-transform: rotate(-150deg);
  -ms-transform: rotate(-150deg);
  -o-transform: rotate(-150deg);
  transform: rotate(-150deg);
}
body div.wrapper ul.radial ul li:nth-child(12) {
  border: 3px solid #aedf89;
  -webkit-transform: rotate(165deg);
  -moz-transform: rotate(165deg);
  -ms-transform: rotate(165deg);
  -o-transform: rotate(165deg);
  transform: rotate(165deg);
}
body div.wrapper ul.radial ul li:nth-child(12) a {
  top: -220px;
  left: -220px;
  -webkit-transform: rotate(-165deg);
  -moz-transform: rotate(-165deg);
  -ms-transform: rotate(-165deg);
  -o-transform: rotate(-165deg);
  transform: rotate(-165deg);
}
body div.wrapper ul.radial ul li:nth-child(13) {
  border: 3px solid #aedf89;
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  transform: rotate(180deg);
}
body div.wrapper ul.radial ul li:nth-child(13) a {
  top: -220px;
  left: -220px;
  -webkit-transform: rotate(-180deg);
  -moz-transform: rotate(-180deg);
  -ms-transform: rotate(-180deg);
  -o-transform: rotate(-180deg);
  transform: rotate(-180deg);
}
body div.wrapper ul.radial ul li:nth-child(14) {
  border: 3px solid #aedf89;
  -webkit-transform: rotate(195deg);
  -moz-transform: rotate(195deg);
  -ms-transform: rotate(195deg);
  -o-transform: rotate(195deg);
  transform: rotate(195deg);
}
body div.wrapper ul.radial ul li:nth-child(14) a {
  top: -220px;
  left: -220px;
  -webkit-transform: rotate(-195deg);
  -moz-transform: rotate(-195deg);
  -ms-transform: rotate(-195deg);
  -o-transform: rotate(-195deg);
  transform: rotate(-195deg);
}
body div.wrapper ul.radial ul li:nth-child(15) {
  border: 3px solid #aedf89;
  -webkit-transform: rotate(210deg);
  -moz-transform: rotate(210deg);
  -ms-transform: rotate(210deg);
  -o-transform: rotate(210deg);
  transform: rotate(210deg);
}
body div.wrapper ul.radial ul li:nth-child(15) a {
  top: -220px;
  left: -220px;
  -webkit-transform: rotate(-210deg);
  -moz-transform: rotate(-210deg);
  -ms-transform: rotate(-210deg);
  -o-transform: rotate(-210deg);
  transform: rotate(-210deg);
}
body div.wrapper ul.radial ul li:nth-child(16) {
  border: 3px solid #aedf89;
  -webkit-transform: rotate(225deg);
  -moz-transform: rotate(225deg);
  -ms-transform: rotate(225deg);
  -o-transform: rotate(225deg);
  transform: rotate(225deg);
}
body div.wrapper ul.radial ul li:nth-child(16) a {
  top: -220px;
  left: -220px;
  -webkit-transform: rotate(-225deg);
  -moz-transform: rotate(-225deg);
  -ms-transform: rotate(-225deg);
  -o-transform: rotate(-225deg);
  transform: rotate(-225deg);
}
body div.wrapper ul.radial ul li:nth-child(17) {
  border: 3px solid #aedf89;
  -webkit-transform: rotate(240deg);
  -moz-transform: rotate(240deg);
  -ms-transform: rotate(240deg);
  -o-transform: rotate(240deg);
  transform: rotate(240deg);
}
body div.wrapper ul.radial ul li:nth-child(17) a {
  top: -220px;
  left: -220px;
  -webkit-transform: rotate(-240deg);
  -moz-transform: rotate(-240deg);
  -ms-transform: rotate(-240deg);
  -o-transform: rotate(-240deg);
  transform: rotate(-240deg);
}
body div.wrapper ul.radial ul li:nth-child(18) {
  border: 3px solid #aedf89;
  -webkit-transform: rotate(255deg);
  -moz-transform: rotate(255deg);
  -ms-transform: rotate(255deg);
  -o-transform: rotate(255deg);
  transform: rotate(255deg);
}
body div.wrapper ul.radial ul li:nth-child(18) a {
  top: -220px;
  left: -220px;
  -webkit-transform: rotate(-255deg);
  -moz-transform: rotate(-255deg);
  -ms-transform: rotate(-255deg);
  -o-transform: rotate(-255deg);
  transform: rotate(-255deg);
}
body div.wrapper ul.radial ul li:nth-child(19) {
  border: 3px solid #aedf89;
  -webkit-transform: rotate(270deg);
  -moz-transform: rotate(270deg);
  -ms-transform: rotate(270deg);
  -o-transform: rotate(270deg);
  transform: rotate(270deg);
}
body div.wrapper ul.radial ul li:nth-child(19) a {
  top: -220px;
  left: -220px;
  -webkit-transform: rotate(-270deg);
  -moz-transform: rotate(-270deg);
  -ms-transform: rotate(-270deg);
  -o-transform: rotate(-270deg);
  transform: rotate(-270deg);
}
body div.wrapper ul.radial ul li:nth-child(20) {
  border: 3px solid #aedf89;
  -webkit-transform: rotate(285deg);
  -moz-transform: rotate(285deg);
  -ms-transform: rotate(285deg);
  -o-transform: rotate(285deg);
  transform: rotate(285deg);
}
body div.wrapper ul.radial ul li:nth-child(20) a {
  top: -220px;
  left: -220px;
  -webkit-transform: rotate(-285deg);
  -moz-transform: rotate(-285deg);
  -ms-transform: rotate(-285deg);
  -o-transform: rotate(-285deg);
  transform: rotate(-285deg);
}
body div.wrapper ul.radial ul li:nth-child(21) {
  border: 3px solid #aedf89;
  -webkit-transform: rotate(300deg);
  -moz-transform: rotate(300deg);
  -ms-transform: rotate(300deg);
  -o-transform: rotate(300deg);
  transform: rotate(300deg);
}
body div.wrapper ul.radial ul li:nth-child(21) a {
  top: -220px;
  left: -220px;
  -webkit-transform: rotate(-300deg);
  -moz-transform: rotate(-300deg);
  -ms-transform: rotate(-300deg);
  -o-transform: rotate(-300deg);
  transform: rotate(-300deg);
}
body div.wrapper ul.radial ul li:nth-child(22) {
  border: 3px solid #aedf89;
  -webkit-transform: rotate(315deg);
  -moz-transform: rotate(315deg);
  -ms-transform: rotate(315deg);
  -o-transform: rotate(315deg);
  transform: rotate(315deg);
}
body div.wrapper ul.radial ul li:nth-child(22) a {
  top: -220px;
  left: -220px;
  -webkit-transform: rotate(-315deg);
  -moz-transform: rotate(-315deg);
  -ms-transform: rotate(-315deg);
  -o-transform: rotate(-315deg);
  transform: rotate(-315deg);
}
body div.wrapper ul.radial ul li:nth-child(23) {
  border: 3px solid #aedf89;
  -webkit-transform: rotate(330deg);
  -moz-transform: rotate(330deg);
  -ms-transform: rotate(330deg);
  -o-transform: rotate(330deg);
  transform: rotate(330deg);
}
body div.wrapper ul.radial ul li:nth-child(23) a {
  top: -220px;
  left: -220px;
  -webkit-transform: rotate(-330deg);
  -moz-transform: rotate(-330deg);
  -ms-transform: rotate(-330deg);
  -o-transform: rotate(-330deg);
  transform: rotate(-330deg);
}
body div.wrapper ul.radial ul li:nth-child(24) {
  border: 3px solid #aedf89;
  -webkit-transform: rotate(345deg);
  -moz-transform: rotate(345deg);
  -ms-transform: rotate(345deg);
  -o-transform: rotate(345deg);
  transform: rotate(345deg);
}
body div.wrapper ul.radial ul li:nth-child(24) a {
  top: -220px;
  left: -220px;
  -webkit-transform: rotate(-345deg);
  -moz-transform: rotate(-345deg);
  -ms-transform: rotate(-345deg);
  -o-transform: rotate(-345deg);
  transform: rotate(-345deg);
}
body div.wrapper ul.radial ul li:nth-child(25) {
  border: 3px solid #aedf89;
  -webkit-transform: rotate(360deg);
  -moz-transform: rotate(360deg);
  -ms-transform: rotate(360deg);
  -o-transform: rotate(360deg);
  transform: rotate(360deg);
}
body div.wrapper ul.radial ul li:nth-child(25) a {
  top: -220px;
  left: -220px;
  -webkit-transform: rotate(-360deg);
  -moz-transform: rotate(-360deg);
  -ms-transform: rotate(-360deg);
  -o-transform: rotate(-360deg);
  transform: rotate(-360deg);
}
body div.wrapper ul.radial ul li:nth-child(26) {
  border: 3px solid #aedf89;
  -webkit-transform: rotate(375deg);
  -moz-transform: rotate(375deg);
  -ms-transform: rotate(375deg);
  -o-transform: rotate(375deg);
  transform: rotate(375deg);
}
body div.wrapper ul.radial ul li:nth-child(26) a {
  top: -220px;
  left: -220px;
  -webkit-transform: rotate(-375deg);
  -moz-transform: rotate(-375deg);
  -ms-transform: rotate(-375deg);
  -o-transform: rotate(-375deg);
  transform: rotate(-375deg);
}
body div.wrapper ul.radial ul li:nth-child(27) {
  border: 3px solid #aedf89;
  -webkit-transform: rotate(390deg);
  -moz-transform: rotate(390deg);
  -ms-transform: rotate(390deg);
  -o-transform: rotate(390deg);
  transform: rotate(390deg);
}
body div.wrapper ul.radial ul li:nth-child(27) a {
  top: -220px;
  left: -220px;
  -webkit-transform: rotate(-390deg);
  -moz-transform: rotate(-390deg);
  -ms-transform: rotate(-390deg);
  -o-transform: rotate(-390deg);
  transform: rotate(-390deg);
}
body div.wrapper ul.radial ul li:nth-child(28) {
  border: 3px solid #aedf89;
  -webkit-transform: rotate(405deg);
  -moz-transform: rotate(405deg);
  -ms-transform: rotate(405deg);
  -o-transform: rotate(405deg);
  transform: rotate(405deg);
}
body div.wrapper ul.radial ul li:nth-child(28) a {
  top: -150px;
  left: -150px;
  color: #738694;
  font-style: italic;
  -webkit-transform: rotate(-405deg);
  -moz-transform: rotate(-405deg);
  -ms-transform: rotate(-405deg);
  -o-transform: rotate(-405deg);
  transform: rotate(-405deg);
}
